<template>
	<view>
		<view class="tui-form">
			<view class="tui-view-input">
				<block v-for="(item, index) in registerfield" :key="index">
					<template v-if="current === 0">
						<block v-if="item.inputtype == 'text'">
							<tui-list-cell :hover="false" :lineLeft="false" padding="0">
								<view class="tui-line-cell">
									<view class="tui-title">{{ item.viewmingcheng }}</view>
									<input v-model="item.fieldsvalue" placeholder-class="tui-phcolor" class="tui-input" name="name" :placeholder="item.viewmingcheng" type="text" />
								</view>
							</tui-list-cell>
						</block>
						<block v-if="item.inputtype == 'textarea'">
							<tui-list-cell :hover="false" :lineLeft="false" padding="0">
								<view class="tui-line-cell">
									<textarea class="weui-textarea" v-model="item.fieldsvalue" :placeholder="item.viewmingcheng" style="height: 3.3em" />
								</view>
							</tui-list-cell>
						</block>
						<block v-if="item.inputtype == 'pics'">
							<tui-list-cell :hover="true" :arrow="true" :lineLeft="false" padding="0">
								<view @click="chooseImg(index)" class="tui-list-cell">
									<view>{{ item.viewmingcheng }}</view>
									<image :src="item.fieldsvalue || '/static/images/default_img.png'" class="tui-avatar"></image>
								</view>
							</tui-list-cell>
						</block>
						<block v-if="item.inputtype == 'lbs'">
							<tui-list-cell :arrow="true" :lineLeft="false" padding="0" @tap="onChangePosition(index)">
								<view class="tui-line-cell">
									<view class="tui-title">
										<text class="tui-title-city-text">{{ item.viewmingcheng }}</text>
									</view>
									<input
										placeholder-class="tui-phcolor"
										class="tui-input tui-pr__30"
										disabled
										:placeholder="'请选择' + item.viewmingcheng"
										maxlength="50"
										type="text"
										v-model="item.fieldsvalue.address"
									/>
								</view>
							</tui-list-cell>
						</block>
					</template>
					<template v-if="current === 1">
						<block v-if="item.inputtype == 'checkbox'">
							<tui-list-cell :hover="false" :lineLeft="false" padding="0">
								<view class="uni-list-title">请选择擅长的服务项目</view>
								<view class="uni-list">
									<button
										class="ptypebut"
										@click="selcate"
										:data-index="index"
										:data-val="checkitem.val"
										:type="item.fieldsvalue.includes(checkitem.val.toString()) ? 'primary' : 'default'"
										v-for="checkitem in item.selectvaluearray"
										:key="checkitem.val"
									>
										{{ checkitem.key }}
									</button>
								</view>
							</tui-list-cell>
						</block>
						<block v-if="item.inputtype === 'select'">
							<tui-list-cell :hover="true" :arrow="true" :lineLeft="false" padding="0">
								<view class="tui-list-cell" style="padding: 0rpx;">
									<picker
										style="width: 100%;padding: 40rpx 30rpx 40rpx 30rpx;"
										@change="bindSelectChange"
										range-key="key"
										:data-selectval="item.selectvaluearray"
										:data-index="index"
										:data-sid="item.id"
										:range="item.selectvaluearray"
									>
										<view v-if="item.fieldsvalue_name" class="weui-select">{{ item.fieldsvalue_name }}</view>
										<view v-else style="color: #888" class="weui-select">请选择{{ item.viewmingcheng }}</view>
									</picker>
								</view>
							</tui-list-cell>
						</block>
					</template>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('@/utils/util.js');
export default {
	name: 'diyfields',
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		current: {
			type: Number | String,
			default: () => 0
		}
	},
	data() {
		return {
			registerfield: {},
			latitude: '',
			longitude: '',
			update: '',
			is_submitaudit: 1,
			coo: {}
		};
	},
	mounted() {
		this.registerfield = [...this.value];
		let cooIndex = -1;
		let lbsIndex = -1;
		this.registerfield.forEach((item, index) => {
			if (item.inputtype == 'coo') {
				cooIndex = index;
			} else if (item.inputtype == 'lbs') {
				lbsIndex = index;
			}
		});

		if (cooIndex > -1) {
			this.getLoacationP(cooIndex, lbsIndex);
		}
	},
	watch: {
		registerfield: {
			handler() {
				this.$emit('complete', {
					registerfield: this.registerfield
				});
			},
			deep: true
		}
	},
	methods: {
		getLoacationP(cooIndex, lbsIndex) {
			uni.getLocation({
				type: 'gcj02',
				success: e => {
					console.log(e);
					this.registerfield[cooIndex].fieldsvalue = {
						lng: e.longitude,
						lat: e.latitude
					};

					if (lbsIndex > -1) {
						let key = 'NQMBZ-EGFCW-BKYRG-3ODUO-UR4R2-SBBRD';
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1?location=' + e.latitude + ',' + e.longitude + '&get_poi=1&key=' + key,
							success: res => {
								console.log('腾讯地图API接口返回信息', res);

								this.registerfield[lbsIndex].fieldsvalue = {
									region_name: res.data.result.address_component.street_number,
									address: res.data.result.address,
									province_name: res.data.result.address_component.province,
									city_name: res.data.result.address_component.city,
									district_name: res.data.result.address_component.district
								};
							},
							fail: error => {
								console.log('获取位置信息失败[腾讯]');
							}
						});
					}
				},
				fail: function(e) {
					console.log('获取定位信息失败：' + e.errMsg);
				}
			});
		},
		selcate: function(e) {
			var item = e.currentTarget.dataset.val.toString();
			var index = e.currentTarget.dataset.index;
			if (this.registerfield[index].fieldsvalue.includes(item)) {
				this.delcateids(index, item);
			} else {
				this.registerfield[index].fieldsvalue.push(item);
			}
		},
		bindSelectChange: function(e) {
			if (e.detail.value) {
				this.registerfield[e.currentTarget.dataset.index].fieldsvalue = this.registerfield[e.currentTarget.dataset.index].selectvaluearray[e.detail.value].val;
				this.registerfield[e.currentTarget.dataset.index].fieldsvalue_name = this.registerfield[e.currentTarget.dataset.index].selectvaluearray[e.detail.value].key;
			}
		},
		delcateids: function(index, val) {
			var sel = this.registerfield[index].fieldsvalue.findIndex(item => {
				if (item == val) {
					return true;
				}
			});
			// console.log(index)
			this.registerfield[index].fieldsvalue.splice(sel, 1);
		},
		chooseImg: function(key) {
			var _this = this;
			uni.chooseImage({
				count: 1,
				// 默认9
				sizeType: ['original', 'compressed'],
				// 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				// 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					var tempFilePath = res.tempFilePaths[0];
					console.log('tempFilePath: ', tempFilePath);
					_this.Imgupload(key, tempFilePath);
				}
			});
		},
		Imgupload: function(key, path) {
			console.log('path: ', path);
			var _this = this;
			_this.$request.uploadFile(path).then(res => {
				_this.registerfield[key].fieldsvalue = res.url;
			});
		},
		onChangePosition: function(key) {
			const _this = this;
			uni.chooseLocation({
				success(res) {
					var addressBean = util.regexAddressBean(res.address);
					_this.registerfield[key].fieldsvalue = {
						region_name: res.name,
						address: res.address,
						province_name: addressBean.REGION_PROVINCE,
						city_name: addressBean.REGION_CITY,
						district_name: addressBean.REGION_COUNTRY || '',
						latitude: res.latitude,
						longitude: res.longitude
					};
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.tui-list-cell {
	width: 100%;
	color: $uni-text-color;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 60rpx 24rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
}
.tui-line-cell {
	width: 100%;
	padding: 24rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.tui-title {
	width: 180rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

.tui-title-city-text {
	width: 180rpx;
	height: 40rpx;
	display: block;
	line-height: 46rpx;
}
.tui-input {
	width: 500rpx;
}

.tui-avatar {
	width: 130rpx;
	height: 130rpx;
	display: block;
}
.uni-list-title {
	height: 60rpx;
	padding-top: 15rpx;
	display: flex;
	align-items: center;
	color: #333;
	font-size: 32rpx;
	padding-left: 30rpx;
}
.uni-list {
	width: 100%;
	padding-top: 15rpx;
	padding-bottom: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
	display: grid;
	column-gap: 20rpx;
	row-gap: 20rpx;
	grid-template-columns: repeat(4, 1fr);
}

.ptypebut {
	width: 100%;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	margin-bottom: 10rpx;
}

.checkboxbox {
	padding: 20rpx;
}

.container {
	backgroundcolor: #fff;
	padding-bottom: 80rpx;

	.tui-page-title {
		width: 100%;
		font-size: 48rpx;
		font-weight: bold;
		color: $uni-text-color;
		line-height: 42rpx;
		padding: 110rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
	}

	.tui-form {
		.tui-view-input {
			width: 100%;
			box-sizing: border-box;
			padding: 0 0rpx;

			.tui-cell-input {
				width: 100%;
				display: flex;
				align-items: center;
				padding-top: 48rpx;
				padding-bottom: $uni-spacing-col-base;

				input {
					flex: 1;
					padding-left: $uni-spacing-row-base;
				}

				.tui-icon-close {
					margin-left: auto;
				}

				.tui-btn-send {
					width: 156rpx;
					text-align: right;
					flex-shrink: 0;
					font-size: $uni-font-size-base;
					color: $uni-color-primary;
				}

				.tui-gray {
					color: $uni-text-color-placeholder;
				}

				.tui-textarea {
					width: 100%;
					height: 300rpx;
					font-size: 28rpx;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					background-color: #fff;
				}
			}
		}

		.tui-cell-text {
			width: 100%;
			padding: 40rpx $uni-spacing-row-lg;
			box-sizing: border-box;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			display: flex;
			align-items: center;

			.tui-color-primary {
				color: $uni-color-primary;
				padding-left: $uni-spacing-row-sm;
			}
		}

		.tui-btn-box {
			width: 100%;
			padding: 0 $uni-spacing-row-lg;
			box-sizing: border-box;
			margin-top: 20rpx;
		}
	}
}
</style>
